<template>
  <div class="notice">
    <div class="iconfont notice-icon">
      &#xe60e;
    </div>
    <swiper class="swiper"
            circular
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :vertical="vertical"
            :duration="duration">
      <swiper-item v-for="(item, index) in noticeList" :key="item.id">
        <view class="swiper-item uni-bg-red" @tap="getConsultDetail(item)">{{item.title}}</view>
      </swiper-item>
    </swiper>
<!--    <div class="iconfont notice-icon">-->
<!--      &#xe622;-->
<!--    </div>-->
  </div>
</template>
<script setup>
import {ref} from 'vue';
import {getConsult} from '@/api/home';
import {onLoad, onShow} from "@dcloudio/uni-app";

let background = ['color1', 'color2', 'color3'];
let indicatorDots = ref(false);
let autoplay = ref(true)
let interval = ref(2000)
let duration = ref(500)
let vertical = ref(true)
let noticeList = ref([])

const getConsultList = () => {
  getConsult().then(res => {
    if (res.data.code === 200){
      noticeList.value = res.data.data
    }
  })
}

const getConsultDetail = (row) => {
  uni.navigateTo({
    url: `/pages/index/consult/consult?data=`+JSON.stringify(row)
  })
}

onLoad( ()=>{
  getConsultList()
})
</script>

<style lang="scss" scoped>
.notice{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px;
  box-sizing: border-box;
  .notice-icon{
    color: #2A54A0;
  }
  .swiper{
    width: 100%;
    height: 25px;
    text-align: center;
  }
}
</style>